<template>
  <el-row id="cpts-role-manage-type">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card  v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>角色管理</span>
        <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;margin-right: 10px" type="primary" @click="handleAdd">添加<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>

      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%;"
        max-height="644">
        <el-table-column
          align="center"
          prop="name"
          label="角色名">
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button :disabled="!isViewEdit"
              size="mini"
              type="primary"
              @click="handleSetting(scope.$index, scope.row)">权限配置</el-button>

            <el-button :disabled="!isViewEdit"
                       size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

    <!--配置弹窗-->
    <el-dialog  :visible.sync="settingDialogShow">
      <el-row slot="title">
        <span style="font-size: 18px">添加/配置</span>  <el-button @click="handleSubmitSetting()" style="margin-left: 1100px; padding: 6px 10px"type="primary"  :loading="false">提交</el-button>
      </el-row>

      <el-form  label-width="120px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="角色名" prop="">
              <el-input  :disabled="forbidden" v-model="roleName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="页面可见" prop="">
              <el-tree
                :data="treeDatas1"
                :props="defaultProps"
                 ref="crmt_versionTree"
                 node-key="id"
                show-checkbox
                @check-change="handleCheckChange">
              </el-tree>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="页面可操作" prop="">
              <el-tree
                ref="crmt_editTree"
                :data="treeDatas2"
                :props="defaultProps"
                node-key="id"
                show-checkbox
                @check-change="handleCheckChange">
              </el-tree>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>


    </el-dialog>

  </el-row>
</template>

<script>
  export default {
    name: "roleManage",
    data(){
      return {
        isViewShow: false,
        isViewEdit: false,
        activeName:'1',
        settingDialogShow: false,
        tableData:[],
        defaultProps: {
          children: 'subPages',
          label: 'name'
        },
        treeDatas1: [],
        treeDatas2: [],
        treeBase: [],
        roleName: '',
        roleId: '',
        forbidden: false
      }
    },
    mounted(){
      let obj = this.validateGlobal.getPermission(25)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askRoleBase()
      this.askRoleList()
    },
    methods:{
      resetForm(){
        let _that  = this
        _that.roleName = ''
        _that.roleId = ''
        _that.treeDatas1 = _that.validateGlobal.cloneObject( _that.treeBase)
        _that.treeDatas2 =_that.validateGlobal.cloneObject( _that.treeBase)
        this.$nextTick(()=>{
          _that.$refs.crmt_versionTree.setCheckedKeys([]);
          _that.$refs.crmt_editTree.setCheckedKeys([]);
        })
      },
      clearMark(arry){
        if (arry) {
          for(let i = 0;i<arry.length;++i){
            arry[i].isSee = 0
            arry[i].isOperate = 0
          }
        }
      },
      handleAdd(){
        if (!this.settingDialogShow) {
          this.settingDialogShow = true
        }
        this.forbidden = false
        this.resetForm()
      },
      handleSetting(index,row){
        if (!this.settingDialogShow) {
          this.settingDialogShow = true
        }

        let _that  = this
        _that.forbidden = true
        _that.roleName = row.name
        _that.roleId = row.id
        let versionKeys = []
        let editKeys = []
        for(let i = 0;i<row.pages.length;++i){
          if (row.pages[i].isSee === 1) {
            versionKeys.push(row.pages[i].id)
          }
          if (row.pages[i].isOperate === 1) {
            editKeys.push(row.pages[i].id)
          }
          for(let j = 0;j<row.pages[i].subPages.length;++j){
            if (row.pages[i].subPages[j].isSee === 1) {
              versionKeys.push(row.pages[i].subPages[j].id)
            }
            if (row.pages[i].subPages[j].isOperate === 1) {
              editKeys.push(row.pages[i].subPages[j].id)
            }
          }
        }
        this.$nextTick(()=>{
          _that.$refs.crmt_versionTree.setCheckedKeys(versionKeys);
          _that.$refs.crmt_editTree.setCheckedKeys(editKeys);
        })

      },
      handleSubmitSetting(){
         let _that = this
         let arryVersion = _that.$refs.crmt_versionTree.getCheckedNodes()
         let arryOperate = _that.$refs.crmt_editTree.getCheckedNodes()
         this.clearMark(arryVersion)
         this.clearMark(arryOperate)
         let postArryVersion = _that.validateGlobal.cloneObject(arryVersion)
         let postArryOperate = _that.validateGlobal.cloneObject(arryOperate)
         let tempArry = []
        for (let i = 0; i < postArryVersion.length;++i){
          postArryVersion[i].isSee = 1
        }
        for (let j = 0;j < arryOperate.length;++j){
          let isFind = false
          for (let z = 0;z < arryVersion.length;++z){
            if (arryOperate[j].id == arryVersion[z].id) {
              postArryVersion[z].isOperate = 1
              isFind  = true
              continue
            }
          }
          if (!isFind) {
            postArryOperate[j].isOperate = 1
            tempArry.push(postArryOperate[j])
          }
        }
        let postArry = postArryVersion.concat(tempArry)
        this.postNewData(postArry)
      },
      handleCheckChange(data, checked, indeterminate) {
      },
      handleNodeClick(data) {
      },
      handleDelete(index,row){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.roleDelete
        let askData = {
          userId: userId,
          id:row.id,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('删除成功!');
            _that.askRoleList()
          }else{
            _that.$message('删除失败!');
          }
        })
      },
      askRoleBase(){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.roleBase
        let askData = {
          userId: userId,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.treeBase = res.data
            _that.treeDatas1 = _that.validateGlobal.cloneObject( _that.treeBase)
            _that.treeDatas2 =_that.validateGlobal.cloneObject( _that.treeBase)
          }else{
            _that.$message('数据获取失败!');
          }
        })
      },
      askRoleList(){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.roleList
        let askData = {
          userId: userId,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.tableData = res.data
          }else{
            _that.$message('数据获取失败!');
          }
        })
      },
      postNewData(arry){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.roleAdd + '?userId=' + userId
        let askData = {
          id: _that.roleId,
          name: _that.roleName,
          pages: arry
        }
        this.http.post(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.settingDialogShow = false
            _that.askRoleList()
          }else{
            _that.$message('设置失败!');
          }
        })
      },
    }

  }
</script>

<style lang="scss">
  #cpts-role-manage-type{

    > .el-card{
      margin: 20px 20px 0 20px;
      height: 780px;
    }

    .el-dialog{
      width: 1300px;
    }
  }
</style>
